<style lang="scss" rel="stylesheet/scss" scoped>
  ul{
    background: white;
    li{
      width: 100%;
      line-height: 2rem;
      font-size: .75rem;
      box-sizing: border-box;
      padding: 0 1rem;
    }
    .active{
      color: #0994db;
    }
  }
</style>
<template>
  <div style="position: relative;overflow: hidden;" :style="{height:height}">
    <Scroll :data="list" v-if="list && list.length > 0">
      <ul>
        <li v-for="item in list" @click="clickItem(item)" :class="activeId && activeId == item[idName]?'active':''">
          {{item[txtName]}}
          <i class="iconfont icon-duihao fr" v-if="activeId && activeId == item[idName]"></i>
        </li>
      </ul>
    </Scroll>
    <div style="padding: 8px;font-size: .8rem;color: grey;" v-else>暂无可选数据</div>
  </div>
</template>
<script>
  import Scroll from 'components/../common/scroll/scroll.vue';
  export default {
    components: {Scroll},
    props: {
      list: null,
      txtName: {
        default: 'txt'
      },
      idName: {
        default: 'id'
      },
      activeId: null,
      height:{
          type:String,
          default:'10rem'
      }
    },
    methods: {
      clickItem(item){
        this.$emit('clickItem', item);;
      }
    }
  };
</script>
